// @ts-ignore
import {createVNode, render} from 'vue'
import LoginVue from "~/components/templates/login/LoginVue.vue";
import hUpdatePopup from "~/components/templates/noticePopup.vue";

interface AuthInterface {
    /** 全局统一登录 */
    login(): void;

    /** 打开站点更新提示弹窗 */
    updatePopup(option: AuthNamespace.UpdatePopup): void;

    /** 销毁页面指定 id dom元素 */
    destroyDiv(name: string): void;
}

export namespace AuthNamespace {
    export interface UpdatePopup {
        /** 点击取消回调 */
        cancel?: () => void;
        /** 点击确认回调 */
        confirm?: () => void;
    }
}

export class Auth implements AuthInterface {
    private static _ins = new Auth()
    private name: string = 'hope-'

    public static get ins(): Auth {
        return Auth._ins ? Auth._ins : (Auth._ins = new Auth())
    }

    private render(className: string, div?: HTMLDivElement | HTMLAudioElement, template?: any, props?: any) {
        const doms = document.getElementsByClassName(className)
        for (let i = 0; i < doms.length; i++) {
            doms[i].remove()
        }
        if (div) {
            div.setAttribute('class', className) // 为dom添加一个唯一标识类（无实质功能）
            document.body.appendChild(div) // 容器追加到body中
            const vNode = createVNode(template, props) // 将组件编译为虚拟dom节点
            render(vNode, div) // 将虚拟dom添加到div容器中
        }
    }

    /**
     * 站点更新弹窗
     */
    updatePopup(option: AuthNamespace.UpdatePopup): void {
        const div = document.createElement("div");
        this.render(this.name + "updatePopup", div, hUpdatePopup, option);
    }

    destroyDiv(name: string): void {
        const div = document.createElement('div')
        this.render(this.name + name, div)
    }

    login(): void {
        const div = document.createElement('div')
        this.render(this.name + 'login', div, LoginVue, {})
    }

}

export const auth = Auth.ins
